<template>
  <el-dialog
    v-model="isShow"
    :title="title"
    width="800"
    :close-on-click-modal="false"
    @close="handleClose"
  >
  <el-tabs v-model="activeName">
    <el-tab-pane label="活动合影" name="first">
      <el-form class="dialog-form" label-width="120px">
          <el-form-item label="活动封面：" required>
            <ImageUpload v-model:imageUrl="form.photo"></ImageUpload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="btnLoading" @click="toSubmit">提交</el-button>
          </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="活动成员" name="second">
      <el-table
          :data="list.sign"
          stripe
          border
          style="width: 100%"
          >
          <el-table-column label="序号" type="index" width="80"/>
          <el-table-column label="头像" prop="avatar" show-overflow-tooltip>
					  <template #default="scope">
              <div style="display: flex; justify-content: center">
                <ImageUpload v-model:imageUrl="scope.row.appUserListVo.avatar" height="50px" width="50px" disabled />
              </div>
					  </template>
				  </el-table-column>
          <el-table-column label="昵称">
            <template #default="scope">
              {{ scope.row.appUserListVo.nickname || scope.row.appUserListVo.username }}
            </template>
          </el-table-column>
          <el-table-column label="手机" prop="appUserListVo.username"/>
          <el-table-column label="角色">
            <template #default="scope">
              {{ getRoleName(scope.row.role) }}
            </template>
          </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="活动签到" name="third">
      <el-table
          :data="list.check"
          stripe
          border
          style="width: 100%"
          >
          <el-table-column label="序号" type="index" width="80"/>
          <el-table-column label="头像" prop="avatar" show-overflow-tooltip>
					  <template #default="scope">
              <div style="display: flex; justify-content: center">
                <ImageUpload v-model:imageUrl="scope.row.appUserListVo.avatar" height="50px" width="50px" disabled />
              </div>
					  </template>
				  </el-table-column>
          <el-table-column label="昵称">
            <template #default="scope">
              {{ scope.row.appUserListVo.nickname || scope.row.appUserListVo.username }}
            </template>
          </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>
  </el-dialog>
</template>

<script setup lang="ts">
import {ElMessage, ElMessageBox} from 'element-plus'
const ImageUpload = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'));
import { ref, reactive, inject, getCurrentInstance, ComponentInternalInstance } from 'vue';
import { getDetails } from '/@/api/admin/user';
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
let optionData:any = inject('optionData'); 
const emit = defineEmits(['confirm']);
let isShow = ref(false);
let title = ref('活动管理');
let btnLoading = ref(false);
let row:any = ref({});
const activeName = ref('first');
const list = reactive({
  sign: [],
  check: []
});
let form = reactive({
  activityId: null,
  photo: null,
})
const init = (data:any) => {
  row.value = data;
  isShow.value = true;
  getDetails();
  getList();
};
const getDetails = () => {
  proxy.$request('get', '/admin/activities/'+ row.value.id, {}, (data,msg) => {
      form.activityId = data.id;
      form.photo = data.photo;
    });
}
const getList = async () => {
  list.sign = await proxy.$request('get', '/admin/activityRegistrations/getListActivities/'+ row.value.id, {});
  list.check = await proxy.$request('get', '/admin/checkins/list/'+ row.value.id, {});
};
const getRoleName = (role) => {
  let roles = role.split(':');
  let names = roles.map(item => {
    return proxy.$util.setName(item, optionData.activityRole);
  });
  return names.join(',');
}
const toSubmit = () => {
  if(!form.photo){
      ElMessage.warning('请上传合照')
        return;
    }
  btnLoading.value = true;
  proxy.$request('put', '/admin/activities/updateActivity/photo', form, (data,msg) => {
       ElMessage.success('提交成功！');
       getDetails();
      btnLoading.value = false;
  }, msg => {
    btnLoading.value = false;
  })
}
const handleClose = () => {
  form.photo = null;
  list.sign = [];
  list.check = [];
}

defineExpose({
  init,
})
</script>

<style>

</style>